<template>
    <div class="main-my-address-add">
        <van-form @submit="onSubmit" :show-error-message="false" >
            <van-field
                :style="{marginBottom: '30px'}"
                class="username"
                v-model="addressFrom.title"
                name="username"
                placeholder="Address Title"
                :rules="[{ required: true, message: 'Address Title is required' }]"
            />
            <van-field
                :style="{marginBottom: '30px'}"
                class="username"
                v-model="addressFrom.nickname"
                name="username"
                placeholder="Name Surname"
                :rules="[{ required: true, message: 'Name Surname is required' }]"
            />
            <van-field
                :style="{marginBottom: '30px'}"
                class="username"
                v-model="addressFrom.city_id"
                name="username"
                placeholder="City"
                :rules="[{ required: true, message: 'City is required' }]"
            />
            <van-field
                :style="{marginBottom: '30px'}"
                class="username"
                v-model="addressFrom.address_info"
                name="username"
                placeholder="Address"
                :rules="[{ required: true, message: 'Address is required' }]"
            />
        </van-form>
        <div class="btns">
            <van-button round block type="primary" class="btn"><strong>Update Address</strong></van-button>
        </div>
    </div>
</template>

<script lang="ts" setup>
import { reactive, ref, watch  } from 'vue'

const addressFrom = {
    title: '',
    nickname: '',
    city_id: '',
    address_info: ''
}

const onSubmit = () => {

}



</script>

<style lang="less" scoped>
.main-my-address-add {
    padding: 40px 16px 0px 16px ;
    .btns {
        height: 80px;
        .btn {
            position: fixed;
            width: calc(100vw - 32px);
            margin: 0px 16px;
            bottom: 80px;
            left: 0px;
        }
    }
}
</style>
